<style scoped lang="scss">
.camera {
width: 100%;
height: 500px;
}

</style>

<template>
  <div class="app-container home">

    <svg-icon icon-class="identification"  @click="openDialog" />

    <el-dialog
      :visible.sync="dialogVisible"
      width="30%"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close=false

    >
      <video class="camera" ref="videoElement" autoplay></video>
      <svg-icon v-show="isIdentification === true" style="width: 30%;height: 100px;margin-left: 35%;" icon-class="through"/>
      <svg-icon v-show="isIdentification === false" style="width: 30%;height: 100px;margin-left: 35%;" icon-class="notThrough"/>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closeDialog">取 消</el-button>
        <el-button type="primary" @click="closeDialog">确 定</el-button>
      </span>
    </el-dialog>



  </div>
</template>

<script>

export default {
  data() {
  return {
    show : false,
    dialogVisible : false,
    isIdentification : '',
    mediaStream : '',
    isCheck : false
  };
  },
  methods: {
  async startCamera() {
    try {
    const stream = await navigator.mediaDevices.getUserMedia({ video: true });
    this.mediaStream = stream;

    this.$refs.videoElement.srcObject = stream;
    setInterval(() => {
      if (!this.isCheck && this.dialogVisible)
        this.takePhoto();
    }, 5000);
    } catch (error) {
    console.error('Error accessing camera:', error);
    }
  },
    sendMessage(baseImg) {
      console.log(baseImg)
      this.websocket.send(JSON.stringify(baseImg))
      console.log("baseImg")
    },
    connectWebsocket() {
      this.websocket = new WebSocket('ws://127.0.0.1:1451/identification/u' + this.$store.getters.id);

      // 监听WebSocket连接打开事件
      this.websocket.onopen = () => {
        console.log('WebSocket connected');
      };

      this.websocket.onclose = () => {
        console.log("连接关闭")
      }

      this.websocket.onerror = (event) => {
        console.log(event)
      }

      // 监听WebSocket消息事件
      this.websocket.onmessage = (event) => {
        console.log(event.data)
        if (event.data === "识别成功") {

          this.isIdentification = true;

          // 在5秒后将 this.isIdentification 设为 ''
          setTimeout(() => {
            this.isIdentification = '';
          }, 5000); // 5000毫秒即5秒

        } else if (event.data === "识别失败") {

          this.isIdentification = false

          // 在5秒后将 this.isIdentification 设为 ''
          setTimeout(() => {
            this.isIdentification = '';
          }, 5000); // 5000毫秒即5秒
        }

        this.isCheck = false
      };
    },
  stopCamera() {
    this.mediaStream.getTracks().forEach(track => track.stop());
  },
  takePhoto() {
    this.isCheck = true
    const videoElement = document.createElement('video');
    videoElement.srcObject = this.mediaStream;
    videoElement.play();

    setTimeout(() => {
    const canvas = document.createElement('canvas');
    canvas.width = videoElement.videoWidth;
    canvas.height = videoElement.videoHeight;
    const context = canvas.getContext('2d');
    context.drawImage(videoElement, 0, 0, canvas.width, canvas.height);

    const photoUrl = canvas.toDataURL('image/jpeg');
    const baseImg = photoUrl.replace("data:image/jpeg;base64,", "")
    this.sendMessage(baseImg)
    }, 1000); // 等待视频加载
  },
  openDialog() {
    this.dialogVisible = true;
    this.connectWebsocket();
    this.startCamera();
  },
  closeDialog() {
    this.dialogVisible = false;
    this.websocket.close()
    this.stopCamera()
  }
  },
  created() {
  },
  beforeDestroy() {
    this.closeDialog()
  },
  beforeRouteLeave(to, from, next) {
  // 关闭遮罩层的逻辑，可以根据实际需求进行调整
    this.closeDialog()
    next();
  }
};
</script>
